<template>
  <div>
    <div v-loading="loading">
      <h1>
        <p>售后方式：{{refund.serviceTypeLabel}} </p>
        <p>售后状态：{{refund.serviceStatusLabel}}</p>
      </h1>
      <ul>
        <li>申请时间：{{refund.createTime}}</li>
      </ul>
      <div>
        <div class="headerCla">
          <span>订单编号： {{refund.tradeSn}}</span>
          <span>退款方式： 原路退回 </span>
          <span>申请金额： {{refund.applyRefundPrice}}</span>
          <span>实际退款： {{refund.actualRefundPrice}}</span>
        </div>
        <div class="sectionCla1">
          <hgroup>图片凭证：</hgroup>
          <el-image v-for="(item,index) in imgs" :key="index" :src="item" :preview-src-list="imgs">
          </el-image>
        </div>
        <div class="sectionCla2">
          <p>退货退款原因： {{refund.problemDesc}}</p>
          <p>退货退款说明： {{refund.reason}}</p>
        </div>
        <div class="sectionCla3">
          <div class="sectionCla3-content">
            <span>退货商品:</span>
            <!-- <el-button type="primary" size="mini" @click="clickSeeOrder()">查看订单</el-button> -->
          </div>
          <el-table border :data="tableData" border tooltip-effect="dark">
            <el-table-column label="序号" width="100" align="center" type="index"> </el-table-column>
            <el-table-column label="商品编码" prop="identifier" width="150" align="center">
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName" align="center"> </el-table-column>
            <el-table-column label="生产采购商" prop="manufacturer" align="center"> </el-table-column>
            <el-table-column label="批准文号" prop="approvalNo" width="200" align="center">
            </el-table-column>
            <el-table-column label="商品单价" width="150" align="center" prop="goodsPrice">
            </el-table-column>
            <el-table-column label="购买数量" prop="purchaseQuantity" width="150" align="center">
            </el-table-column>
            <el-table-column label="退货数量" prop="num" width="150" align="center"> </el-table-column>
          </el-table>
        </div>
        <div class="footer_btns">

          <el-radio-group v-model="radio" @change="getTextarea">
            <!-- 退款 -->
            <div class="radio" v-hasPermi="['order:afterSale:serviceStatus:edit']"
              v-if="refund.serviceStatus === 'APPLY' && refund.serviceType === 'RETURN_MONEY' ">
              <el-radio v-model="radio" label="WAIT_REFUND">待平台退款</el-radio>
              <el-radio v-model="radio" label="REFUSE">拒绝</el-radio>
              <el-radio v-model="radio" label="BUYER_CANCEL">用户取消售后</el-radio>
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea">
              </el-input>
              <el-button type="danger" @click="determine">提交</el-button>
            </div>

            <!-- 退货 -->
            <div class="radio" v-hasPermi="['order:afterSale:serviceStatus:edit']"
              v-if="refund.serviceStatus === 'APPLY' && refund.serviceType === 'RETURN_GOODS' ">
              <el-radio v-model="radio" label="BUYER_RETURN">待卖家收货</el-radio>
              <el-radio v-model="radio" label="WAIT_REFUND">待平台退款</el-radio>
              <el-radio v-model="radio" label="REFUSE">拒绝</el-radio>
              <el-radio v-model="radio" label="BUYER_CANCEL">用户取消售后</el-radio>
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea">
              </el-input>
              <el-button type="danger" @click="determine">提交</el-button>
            </div>

            <!-- 待平台退款 -->
            <div class="radio" v-if="refund.serviceStatus === 'WAIT_REFUND'" v-hasPermi="['order:afterSale:refundPrice']">
              <div class="radio_box">
                申请金额：{{ refund.applyRefundPrice }}
                退款金额： <el-input type="text" v-model="actualRefundPrice"> </el-input>
              </div>
              <el-button type="success" @click="determine">提交</el-button>
              <el-button type="danger" @click="termination">终止售后</el-button>
            </div>

            <!-- 待卖家收货 -->
            <div class="radio" v-if="refund.serviceStatus === 'BUYER_RETURN'" v-hasPermi="['order:afterSale:serviceStatus:edit']">
              <el-radio v-model="radio" label="WAIT_REFUND">待平台退款</el-radio>
              <el-radio v-model="radio" label="REFUSE">拒绝</el-radio>
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea">
              </el-input>
              <el-button type="danger" @click="determine">提交</el-button>
            </div>

            <div class="radio" v-if="refund.serviceStatus === 'REFUSE'" v-hasPermi="['order:afterSale:serviceStatus:edit']">
              <el-radio v-model="radio" label="BUYER_CANCEL">用户取消售后</el-radio>
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea">
              </el-input>
              <el-button type="danger" @click="determine">提交</el-button>
            </div>

          </el-radio-group>

        </div>
      </div>
    </div>
    <!-- 查看订单 -->
    <div class="orderInfos" v-show="showSeeOrder" v-hasPermi="['order:order:query']">
      <ReturnRefundExamineSeeOrder @seeOrderClose="seeOrderClose">
      </ReturnRefundExamineSeeOrder>
    </div>

    <!-- <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag title="提示" :visible.sync="dialog" width="20%">
      <span>是否确认提交</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog> -->

  </div>
</template>

<script>
import ReturnRefundExamineSeeOrder from "./returnRefundExamineSeeOrder.vue";
import { getAfterSaleInfo, afterSalesExamine, afterSalesReturn, revokeAfterSale } from "@/api/order/afterSale"

export default {
  name: 'AfterSaleDetail',
  dicts: ['order_after_sale', 'after_sale_status'],
  components: {
    ReturnRefundExamineSeeOrder
  },
  data () {
    return {
      tableData: [],
      showSeeOrder: false,//查看订单显示与隐藏
      afterSaleId: undefined,
      refund: '',
      imgs: [],
      radio: 'WAIT_REFUND',
      textarea: '同意退款',
      loading: false,
      actualRefundPrice: '',
      // price: this.refund.refundFreightPrice + this.refund.applyRefundPrice,
      // price: this.refund.applyRefundPrice,
    }
  },
  created () {
    this.afterSaleId = this.$route.params && this.$route.params.afterSaleId;
    this.getAfterSaleDetail()
  },
  methods: {
    getTextarea () {
      if (this.refund.serviceStatus === 'APPLY') {
        if (this.refund.serviceType === 'RETURN_MONEY') {
          if (this.radio === 'WAIT_REFUND') {
            this.textarea = '同意退款'
          } else if (this.radio === 'REFUSE') {
            this.textarea = '客户同意发货，拒绝退款'
          } else if (this.radio === 'BUYER_CANCEL') {
            this.textarea = '客户同意发货，撤销售后'
          }
        } else {
          if (this.radio === 'BUYER_RETURN') {
            this.textarea = '同意退货'
          } else if (this.radio === 'WAIT_REFUND') {
            this.textarea = '同意退款'
          } else if (this.radio === 'REFUSE') {
            this.textarea = '客户同意收货，拒绝退款'
          } else if (this.radio === 'BUYER_CANCEL') {
            this.textarea = '客户同意发货，撤销售后'
          }
        }
      } else if (this.refund.serviceStatus === 'BUYER_RETURN') {
        if (this.radio === 'WAIT_REFUND') {
          this.textarea = '同意退款'
        } else if (this.radio === 'REFUSE') {
          this.textarea = '客户同意收货，拒绝退款'
        } else if (this.radio === 'BUYER_CANCEL') {
          this.textarea = '客户同意发货，撤销售后'
        }
      } else if (this.refund.serviceStatus === 'REFUSE') {
        if (this.radio === 'BUYER_CANCEL') {
          this.textarea = '客户同意发货，撤销售后'
        }
      }
    },
    getAfterSaleDetail () {
      // 售后单 详情数据
      getAfterSaleInfo(this.afterSaleId).then(res => {
        if (res.code === 200) {
          this.refund = res.data
          this.actualRefundPrice = res.data.applyRefundPrice
          this.tableData = this.refund.afterSaleItems
          if (this.refund.afterSaleImage) {
            this.imgs = this.refund.afterSaleImage.split(',')
          }

          this.dict.type.order_after_sale.forEach(i => {
            if (this.refund.serviceType === i.value) this.refund.serviceTypeLabel = i.label
          })
          this.dict.type.after_sale_status.forEach(j => {
            if (this.refund.serviceStatus === j.value) this.refund.serviceStatusLabel = j.label
          })
        }
      })
    },
    determine () {
      let params = {
        auditRemark: this.textarea,
        serviceStatus: this.refund.serviceStatus === 'WAIT_REFUND' ? 'COMPLETE' : this.radio,
        actualRefundPrice: this.actualRefundPrice
      }

      // 拒绝
      // if (this.radio === 'REFUSE') {
      //   params = { ,  }
      // }
      // // 待平台退款
      // if (this.radio === 'WAIT_REFUND') {
      //   params = { remark: this.textarea }
      // }
      // // 待卖家收货
      // if (this.radio === 'BUYER_RETURN') {
      //   params = { remark: this.textarea }
      // }
      const _this = this;
      if (_this.refund.serviceStatus === 'WAIT_REFUND') {
        //实际退款
        _this.$modal.confirm('确认退款吗？').then(function () {
          _this.loading = true
          afterSalesReturn(_this.refund.sn, params).then(res => {
            if (res.code === 200) {
              _this.$modal.msgSuccess("退款成功")
              // _this.$store.state.tagsView.visitedViews.splice(_this.$store.state.tagsView.visitedViews.findIndex(item => item.path === _this.$route.path), 1)
              // _this.$router.push(_this.$store.state.tagsView.visitedViews[_this.$store.state.tagsView.visitedViews.length - 1].path)
              _this.getAfterSaleDetail()
            }
            _this.loading = false
          })
        }).catch(function (e) {
          console.log(e)
          _this.$modal.msgSuccess("退款失败")
          _this.loading = false
        })
      } else {
        if (_this.radio == 'BUYER_CANCEL') {
          _this.$modal.confirm('确认取消售后单吗？').then(function () {
            _this.loading = true
            revokeAfterSale(_this.refund.sn, params).then(res => {
              if (res.code === 200) {
                _this.$modal.msgSuccess("取消成功")
                // _this.$store.state.tagsView.visitedViews.splice(_this.$store.state.tagsView.visitedViews.findIndex(item => item.path === _this.$route.path), 1)
                // _this.$router.push(_this.$store.state.tagsView.visitedViews[_this.$store.state.tagsView.visitedViews.length - 1].path)
                _this.getAfterSaleDetail()
              }
              _this.loading = false
            })
          }).catch(function () {
            _this.$modal.msgSuccess("取消失败")
            _this.loading = false
          })
        } else {
          //审核售后单
          _this.$modal.confirm('确认审核吗？').then(function () {
            _this.loading = true
            afterSalesExamine(_this.refund.sn, params).then(res => {
              if (res.code === 200) {
                _this.$modal.msgSuccess("审核成功")
                // _this.$store.state.tagsView.visitedViews.splice(_this.$store.state.tagsView.visitedViews.findIndex(item => item.path === _this.$route.path), 1)
                // _this.$router.push(_this.$store.state.tagsView.visitedViews[_this.$store.state.tagsView.visitedViews.length - 1].path)
                _this.getAfterSaleDetail()
              }
              _this.loading = false
            })
          }).catch(function (e) {
            _this.$modal.msgSuccess("审核失败")
            _this.loading = false
          })
        }
      }
    },
    termination(){
      let params = {
        auditRemark: "平台终止售后",
        serviceStatus: "SELLER_TERMINATION"
      }

      const _this = this;
      this.$modal.confirm('确认终止此售后单吗？').then(function () {
        afterSalesExamine(_this.refund.sn, params).then(res => {
          if (res.code === 200) {
            _this.$modal.msgSuccess("终止售后单成功")
            // _this.$store.state.tagsView.visitedViews.splice(_this.$store.state.tagsView.visitedViews.findIndex(item => item.path === _this.$route.path), 1)
            // _this.$router.push(_this.$store.state.tagsView.visitedViews[_this.$store.state.tagsView.visitedViews.length - 1].path)
            _this.getAfterSaleDetail()
          }
          _this.loading = false
        })
      }).catch(function(e){
        console.log(e)
        this.$modal.msgSuccess("终止售后单失败")
      });
    },
    clickSeeOrder () {//查看订单打开
      this.showSeeOrder = !this.showSeeOrder
    },
    seeOrderClose (row) {//查看订单关闭
      this.showSeeOrder = row
    },
  },
};
</script>

<style lang="scss" scoped>
.returnRefundDetailsClose {
  position: relative;
  left: 98%;
  color: red;
  cursor: pointer;
}
h1 {
  font-size: 28px;
  padding-left: 45px;
  border-bottom: 1px rgba($color: #000000, $alpha: 0.1) solid;
}
ul {
  padding-bottom: 20px;
  border-bottom: 1px rgba($color: #000000, $alpha: 0.1) solid;
}
.footer-btn {
  position: relative;
  left: 84%;
  bottom: -10px;
}
.returnRefundExamineClose {
  position: relative;
  left: 98%;
  color: red;
  cursor: pointer;
}
.headerCla {
  border-bottom: 1px rgba($color: #000000, $alpha: 0.1) solid;
  padding-left: 45px;
  span {
    margin: 20px 0;
    margin-right: 100px;
    display: flex;
  }
}
.sectionCla1,
.sectionCla2 {
  border-bottom: 1px rgba($color: #000000, $alpha: 0.1) solid;
  padding: 20px 0;
  padding-left: 45px;
  p {
    margin: 10px 0;
  }
}
.sectionCla1 {
  .el-image {
    margin: 20px 30px 0px 0px;
    width: 150px;
    height: 150px;
  }
}
.sectionCla3 {
  padding: 0 15px;
  .sectionCla3-content {
    padding: 20px 0;
    padding-left: 30px;
    span {
      margin-right: 500px;
    }
  }
}
.footer_btns {
  padding: 30px;
  padding-left: 45px;
  .radio {
    margin: 20px 0;
    .radio_box {
      font-size: 16px;
      .el-input {
        width: 100px;
      }
    }
  }
  .el-button {
    margin-top: 50px;
    width: 300px;
  }
}
.orderInfos {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.1);
  z-index: 100;
}
</style>
